<script setup lang="ts">
import { ref } from 'vue'
const tableData = ref<any>([
    {

        "actionCode": "S",
        "masterUniqueNo": "6850b41d32e9685e1582",
        "shipCompanyCode": "EGLV",
        "masterBillNo": "EGLV142302818174",
        "vessel": "CMA CGM MUSCA",
        "imo": "9785794",
        "voyage": "OMBF9",
        "movementType": "I",
        "placeOfReceipt": "SHANGHAI",
        "portOfLoading": "SHANGHAI",
        "portOfDischarge": "NEW YORK-NY",
        "etd": "2023-04-29",
        "eta": "2023-06-09",
        "houseBills": [
            {
                "houseUniqueNo": "6850b41d94d9",
                "houseBillNo": "HTSE23111102",
                "houseScac": "MTOD",
                "shipperName": "SUNTEX LTD",
                "shipperAddress": "ROOM 1902, UNIT 5, BUILDING 4 NATHAN RD #15 MONGKOK COMMERCIAL, FN",
                "shipperTel": "15670323031",
                "shipperCountry": "CN",
                "shipperCity": "HONGKONG",
                "consigneeName": "INOX INC",
                "consigneeAddress": "MING MO 63017",
                "consigneeTel": "15670323031",
                "consigneeCountry": "US",
                "consigneeCity": "MO",
                "notifyName": "STAR LOGISTICS",
                "notifyAddress": "MING MO 63017",
                "notifyTel": "15670323031",
                "notifyCountry": "US",
                "notifyCity": "MO",
                "containers": [
                    {
                        "containerNo": "BSIU9642082",
                        "containerType": "45G0",
                        "sealNo": "H373977",
                        "cargoDescription": "OFFICE CHAIR",
                        "hsCode": "123456",
                        "containerWeight": "19740",
                        "containerVolume": "58.35",
                        "packageUnit": "CTN",
                        "packageNum": 31,
                        "mark": 'test'
                    }
                ]
            }
        ]
    },
    {

        "actionCode": "S",
        "masterUniqueNo": "6850b41d32e9685e1582",
        "shipCompanyCode": "COSU",
        "masterBillNo": "CMDUCH0637748",
        "vessel": "PRESIDENT CLEVELAND",
        "imo": "9785794",
        "voyage": "0DBH7",
        "movementType": "I",
        "placeOfReceipt": "SHANGHAI",
        "portOfLoading": "SHANGHAI",
        "portOfDischarge": "OAKLAND-CA",
        "etd": "2023-04-29",
        "eta": "2023-06-09",
        "houseBills": [
            {
                "houseUniqueNo": "6850b41d94d9",
                "houseBillNo": "HTSE23111059",
                "houseScac": "MTOD",
                "shipperName": "COTTEN TRADING",
                "shipperAddress": "ROOM 1902, UNIT 5, BUILDING 4 NATHAN RD #15 MONGKOK COMMERCIAL, FN",
                "shipperTel": "15670323031",
                "shipperCountry": "CN",
                "shipperCity": "HONGKONG",
                "consigneeName": "PIKASO llC",
                "consigneeAddress": "MING MO 63017",
                "consigneeTel": "15670323031",
                "consigneeCountry": "US",
                "consigneeCity": "MO",
                "notifyName": "PIKASO llC",
                "notifyAddress": "MING MO 63017",
                "notifyTel": "15670323031",
                "notifyCountry": "US",
                "notifyCity": "MO",
                "containers": [
                    {
                        "containerNo": "BSIU9642082",
                        "containerType": "45G0",
                        "sealNo": "H373977",
                        "cargoDescription": "OFFICE CHAIR",
                        "hsCode": "123456",
                        "containerWeight": "16606.4",
                        "containerVolume": "60.96",
                        "packageUnit": "CTN",
                        "packageNum": 1214,
                        "mark": 'test'
                    }
                ]
            }
        ]
    }
])

const isfData = ref<any>([
    {
        "actionCode": "S",
        "declareType": "10",
        "isfUniqueNo": "6850b41d-94d9-0df4-aeda-32e9685e1582",
        "cargoType": "SORF",
        "amsType": "BM",
        "amsNo": "OSTIHHLAX2341068",
        "bondHolderType": "01",
        "entities": [
            {
                "partyRole": "IM",
                "partyName": "XNO-A USA",
                "partyIdType": "ANI",
                "partyId": "85-438612234",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "CN",
                "partyName": "INOX INC",
                "partyIdType": "EI",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "SE",
                "partyName": "ASTAR LTD",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "BY",
                "partyName": "JOSE NEW LLC",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "ST",
                "partyName": "JOSE NEW LLC",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "LG",
                "partyName": "SHANGHAI",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "CS",
                "partyName": "DEWELL",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "MF",
                "partyName": "SUNTEX LTD",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": "",
                "htsCodes": [
                    "870819",
                    "940320"
                ]
            }
        ]
    },
    {
        "actionCode": "S",
        "declareType": "10",
        "isfUniqueNo": "6850b41d-94d9-0df4-aeda-32e9685e1582",
        "cargoType": "SORF",
        "amsType": "BM",
        "amsNo": "DWCHSQ56S03063",
        "bondHolderType": "01",
        "entities": [
            {
                "partyRole": "IM",
                "partyName": "COTIL INC",
                "partyIdType": "ANI",
                "partyId": "85-433245600",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "CN",
                "partyName": "PIKASO LLC",
                "partyIdType": "EI",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "SE",
                "partyName": "ASTAR LTD",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "BY",
                "partyName": "JOSE NEW LLC",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "ST",
                "partyName": "JOSE NEW LLC",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "LG",
                "partyName": "SHENZHEN",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "CS",
                "partyName": "DEWELL",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": ""
            },
            {
                "partyRole": "MF",
                "partyName": "COTTEN TRADING",
                "partyIdType": "ZZ",
                "partyId": "",
                "partyCountry": "",
                "partyRegion": "",
                "partyRegionCode": "",
                "partyCity": "",
                "partyZipCode": "",
                "partyAddress": "",
                "htsCodes": [
                    "940370",
                    "591000"
                ]
            }
        ]
    }
])


const iframe = ref()

const sendData = (data: any) => {

    iframe.value.contentWindow.postMessage(data.__v_raw, 'https://www.pltplt.com');
    // 执行滚动到目标位置
    window.scrollTo({
        top: 500,
        behavior: 'smooth' // 平滑滚动
    })
}

</script>

<template>
    <div class="content">
        <a class="back" href="/home">回到主页</a>
        <div class="list">
            <div class="title">
               
                <h2>
                    <img src="@/assets/main/home/icons/tit_icon3.svg" />
                    <span>海运出口订单列表</span>
                </h2>
            </div>
            <table>
                <tr>
                    <th>MBL</th>
                    <th>HBL</th>
                    <th>船名</th>
                    <th>航次</th>
                    <th>启运港</th>
                    <th>目的港</th>
                    <th>件数</th>
                    <th>毛重</th>
                    <th>体积</th>
                    <th>发货人</th>
                    <th>收货人</th>
                    <th>通知人</th>
                    <th>AMS发送</th>
                </tr>
                <tr v-for="item, i in tableData" :key="i">
                    <td>
                        {{ item.masterBillNo }}
                    </td>
                    <td>
                        {{ item.houseBills[0].houseBillNo }}
                    </td>
                    <td>
                        {{ item.vessel }}
                    </td>
                    <td>
                        {{ item.voyage }}
                    </td>
                    <td>
                        {{ item.portOfLoading }}
                    </td>
                    <td>
                        {{ item.portOfDischarge }}
                    </td>
                    <td>
                        {{ item.houseBills[0].containers[0].packageNum }}
                    </td>
                    <td>
                        {{ item.houseBills[0].containers[0].containerWeight }} KGS
                    </td>
                    <td>
                        {{ item.houseBills[0].containers[0].containerVolume }} CBM
                    </td>
                    <td>
                        {{ item.houseBills[0].shipperName }}
                    </td>
                    <td>
                        {{ item.houseBills[0].consigneeName }}
                    </td>
                    <td>
                        {{ item.houseBills[0].notifyName }}
                    </td>

                    <td>
                        <button @click="sendData(item)">发送</button>
                    </td>
                </tr>
            </table>

            <table>
                <tr>
                    <th>AMS B/L NO</th>
                    <th>进口商</th>
                    <th>BOND</th>
                    <th>收货人</th>
                    <th>卖方公司</th>
                    <th>买方公司</th>
                    <th>货物送达公司</th>
                    <th>装柜地址</th>
                    <th>拼箱公司</th>
                    <th>工厂</th>
                    <th>HS Code</th>
                    <th>HS Code</th>
                    <th>ISF发送</th>
                </tr>
                <tr v-for="item, i in isfData" :key="i">
                    <td>
                        {{ item.amsNo }}
                    </td>
                   
                    <td>
                        {{ item.entities[0].partyName }}
                    </td>
                    <td>
                        {{item.entities[0].partyId  }}
                    </td>
                    <td>
                        {{ item.entities[1].partyName }}
                    </td>
                    <td>
                        {{ item.entities[2].partyName }}
                    </td>
                    <td>
                        {{ item.entities[3].partyName }}
                    </td>
                    <td>
                        {{  item.entities[4].partyName }}
                    </td>
                    <td>
                        {{ item.entities[5].partyName }} 
                    </td>
                    <td>
                        {{ item.entities[6].partyName }}
                    </td>
                    <td>
                        {{ item.entities[7].partyName }}
                    </td>
                    <td>
                        {{ item.entities[7].htsCodes[0] }}
                    </td>
                    <td>
                        {{ item.entities[7].htsCodes[1] }}
                    </td>
                   
                    <td>
                        <button class="isf" @click="sendData(item)">发送</button>
                    </td>
                </tr>
            </table>
            <!-- <img src="@/assets/main/home/photo/150107637.jpg" alt=""> -->
        </div>
        <div class="iframe">
            <div class="title">
                <h2>
                    <img src="@/assets/main/home/icons/tit_icon2.svg" />
                    <span>美线数字工具</span>
                    <span class="en">DIGITAL TOOLS</span>
                </h2>
            </div>
            <iframe id="iframe" ref="iframe"
                src="https://www.pltplt.com?nest=2&mainorg=IHDVRK86J0nkENBKtqQPzg==&suborg=新兴国际货运代理有限公司&username=15601880909"
                frameborder="0">

            </iframe>
        </div>
    </div>
</template>

<style scoped lang="scss">
.content {
    min-width: 1400px;
    margin: 0 auto;
    position: relative;
    .back{
        position: absolute;
        right: 30px;
        top:20px;
        z-index: 9;
        color: white;
        background-color: #8993ae;
        font-size: 12px;
        padding: 5px 10px;
    }
    // background-color: aqua;
    .list{
        position: relative;
        z-index: 2;
        // img{
        //     position: absolute;
        //     z-index: -1;
        //     top: 0;
        //     left: 0;
        //     width: 100%;
        //     height: 100%;
        //     object-fit: cover;
        //     opacity: 0.05;
        // }
        padding: 0 0 50px 0;
        .title{
            position: relative;
            // left: -50px;
        }
    }
    table {
        width: 1400px;
        margin: 0 auto;
        background-color: #d7d9df;
        border-collapse: separate;
        /* 分离边框 */
        border-spacing: 1px;
        /* 设置单元格间距为10像素 */
        font-size: 0.75rem;
        margin-bottom: 20px;

        th,
        td {
            padding: 15px 10px;
            text-align: center;
            background: white;
            margin: 0;
            width: 107.6px;
            vertical-align: middle;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
        }

        th {
            background-color: #e2e4e7;
            font-size: 0.8rem;
            font-weight: bold;

        }

        td {
            font-size: 0.7rem;
            color: rgb(26, 27, 29);
        }

        button {
            width: 60px;
            background-color: #8993ae;
            border: none;
            color: white;
            padding: 3px 0;
            border-radius: 5px;
            box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, .2);
            cursor: pointer;
            transition: 0.3s;
        }
        button.isf{
            background-color: #73AD45;
        }

        button:focus,
        button:hover {
            transform: scale(1.02);
            box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .35);
        }
    }

    .title {
        
        h2 {
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            color: #8993ae;
            margin: 0;
            padding: 0;
            img {
                width: 35px;
                margin-right: 20px;
                position: relative;
                top: 4px;
            }

            .en {
                // opacity: 0.4;
                // font-size: 20px;
                position: relative;
                margin-left: 10px;
                // top: 4px;
                // font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                // font-weight: normal;
                // letter-spacing: 1px;
            }
        }

        padding: 20px 0;
    }

    .iframe {
        // margin-top: 50px;
        // background-color: white;
        z-index: 4;
        position: relative;
        // top: -150px;
        display: flex;
        justify-content: center;
        flex-direction: column;

        iframe {
            width: 1400px;
            height: 978px;
            margin: 0 auto;
            border: 1px solid #f0f1f3;
        }
    }
}</style>
